<template>
    <div id="container">
        <el-card id="box-card">
            <div slot="header" class="clearfix">
                <!-- <el-image>11</el-image> -->
                <span>个人信息</span>
                <el-button style="float: right; padding: 3px 0" @click="edit" v-show="this.$store.state.user!=null">{{ isDisable ? '编辑' : '保存' }}</el-button>
            </div>
            <el-form ref="form" :model="form" label-width="auto" size="small">
                <el-form-item label="用户名">
                    <el-input v-model="form.nickName" :disabled="isDisable" clearable></el-input>
                </el-form-item>
                <el-form-item label="年龄" v-show="this.$store.state.user!=null">
                    <el-input v-model="form.age" :disabled="isDisable"></el-input>
                </el-form-item>
                <el-form-item label="性别"  v-show="this.$store.state.user!=null">
                      <el-radio v-model="form.sex" label="男" :disabled="isDisable">男</el-radio>
                      <el-radio v-model="form.sex" label="女" :disabled="isDisable">女</el-radio>
                    <!-- <el-input v-model="form.sex" :disabled="isDisable"></el-input> -->
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="form.phone" :disabled="isDisable" clearable></el-input>
                </el-form-item>
                <el-form-item label="个人简介" v-show="this.$store.state.user!=null">
                    <el-input v-model="form.intro" :disabled="isDisable" autosize clearable></el-input>
                </el-form-item>
            </el-form>
            <!-- <div class="text item">
                <el-input v-model="user.nickName" :disabled="isDisable">
                    <template slot="prepend">用户名</template>
                </el-input>
                <el-input v-model="user.age" :disabled="isDisable">
                    <template slot="prepend">年龄</template>
                </el-input>
                <el-input v-model="user.sex" :disabled="isDisable">
                    <template slot="prepend">性别</template>
                </el-input>
                <el-input v-model="user.phone" :disabled="isDisable">
                    <template slot="prepend">电话</template>
                </el-input>
                <el-input v-model="user.intro" :disabled="isDisable" autosize>
                    <template slot="prepend">个人简介</template>
                </el-input>
            </div> -->
        </el-card>
    </div>
</template>

<script>
import request from "@/utils/request"
export default {
    name:"Userinfo",
    data() {
        return {
            // user:null,
            isDisable:true,
            form:{}
        }
    },
    created(){
        if(this.$store.state.user!=null){
            this.form = this.$store.state.user
        }
        if(this.$store.state.manger!=null){
            this.form = this.$store.state.manger
        }
        // this.user = this.$store.state.user
        // console.log("user",this.user)
        // if(!this.user.intro){
        //     this.user.intro="这个人很懒，什么也没有留下!!!"
        // }
    },
    methods:{
        edit(){
            this.isDisable=!this.isDisable
            if(this.isDisable){
                // console.log("保存个人信息")
                // request.put("/user/updateUserInfo",this.user).then(res=>{
                //     // console.log("-----"+JSON.stringify(res))
                //     this.$store.commit('setUser',JSON.stringify(this.user))
                //     sessionStorage.setItem("user",JSON.stringify(this.user));//缓存用户信息
                // })
                if(this.$store.state.user!=null){
                    request.put("/user/updateUserInfo",this.form).then(res=>{
                        if(res.result){
                            this.$message({
                            type: "success",
                            message: "修改成功"
                            })
                        // console.log("-----"+JSON.stringify(res))
                        this.$store.commit('setUser',JSON.stringify(this.form))
                        sessionStorage.setItem("user",JSON.stringify(this.form));//缓存用户信息
                        }else{
                            this.$message({
                            type: "warning",
                            message: "修改失败"
                            })
                        }
                    })
                }
                // if(this.$store.state.manger!=null){
                //     //TODO 管理员的
                // }

            }
        }      
    }
}
</script>

<style scoped>
    #container{
        display: flex;
        justify-content: center; /**水平居中**/
        justify-items: center;
        justify-content: right; 
        background-size:100% 100%;
        background: url(../static/undraw_explore_re_8l4v.svg);  /*背景图片 */
        background-size: cover; /* 背景图片铺满容器 */
        height: 100vh; /**使容器铺满整个视口**/
    }
    #box-card{
        width: 400px;
        height: 360px;
        margin-top: 150px;
        /* margin-right: 5px; */
        margin-top: 60px;
        margin-right: 35px;
    }
    .clearfix{
        height: 50px;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 10px;
    }
    .el-form-item__label-wrap {
        margin-left: 0px !important;
    }
</style>